<template>
  <div class="invoice-dialog-box">
    <el-dialog
      title="发票详情"
      :visible.sync="displayOrNot"
      :close-on-press-escape="false"
      width="70%"
      :before-close="handleClose"
    >
      <upload-img
        :src="invoiceUrl"
        :invoice-no="invoiceNo"
      />
      <div
        v-if="busnessType === 0"
        class="invoice-money">
        <p>
          已关联产品金额（元）：
          <span>{{ getFormatterPrice(baseInfo.invoiceAmountTaxUsed) }}</span>
        </p>
        <p>
          发票可关联产品金额（元）：
          <span> {{ getFormatterPrice(baseInfo.invoiceAmountTaxNoUsed) }} </span>
        </p>
      </div>
      <div class="invoice-detailed-box">
        <p class="title">发票明细</p>
        <div class="invoice-info">
          <el-editable
            :data="invoiceData"
            :columns="invoiceColumns" />
        </div>
        <div class="invoice-info">
          <el-editable
            :data="productList"
            height="300"
            :columns="productColumns" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  querySettleInvoiceInfo // 配送商/医院-后结算-发票结构化数据
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import UploadImg from '@/moduleComponents/beforeSettle/common/upload-img'
import { fileUpload } from '@const/api.js'
import { invoiceColumns, productColumns } from './const'
import { urlDownload } from '@const/utils.js'
import { hasIn } from 'lodash'
import { getFormatterPrice } from '@const/filter'
export default {
  components: { ElEditable, UploadImg },
  props: {
    displayOrNot: {
      type: Boolean,
      default: false
    },
    busnessType: {
      type: Number,
      default: 0
    },
    invoiceNo: {
      type: String,
      default: ''
    }
  },
  watch: {
    displayOrNot (val) {
      if (val) {
        this.getInvoiceData()
      }
    }
  },
  data () {
    return {
      invoiceUrl: '',
      invoiceColumns,
      baseInfo: {},
      invoiceData: [{}],
      productColumns,
      productList: []
    }
  },
  methods: {
    // 获取列表数据
    getFormatterPrice,
    getInvoiceData () {
      let data = {
        page: 1,
        pageSize: 8,
        busnessType: this.busnessType, // 业务类型（收付款：1）
        invoiceNo: this.invoiceNo
      }
      this.$axios({
        method: 'post',
        url: querySettleInvoiceInfo,
        data: data
      })
        .then(res => {
          const { invoiceUrl, detailLines, ...baseInfo } = hasIn(res, ['data', 'payload']) ? res.data.payload : {}
          this.productList = detailLines || []
          this.invoiceData = [{ ...baseInfo }]
          this.baseInfo.invoiceAmountTaxUsed = baseInfo.invoiceAmountTaxUsed
          this.baseInfo.invoiceAmountTaxNoUsed = baseInfo.invoiceAmountTaxNoUsed
          this.invoiceUrl = invoiceUrl || ''
          // this.invoiceUrl = 'https://md.heng-tai.com.cn/guoke-channel-aggregation-center/api/v1/files/download/ay8k0ipl9dslo7douflu9ie07vu5l1jg.pdf'
        })
        .finally(() => {})
    },
    handleClose () {
      console.log(this.invoiceUrl)
      this.$emit('cancelDialog', this.invoiceUrl)
    }
  }
}
</script>
<style lang="less" scoped>
.invoice-dialog-box {
  .invoice-money {
    display: flex;
    align-items: center;
    border-top: 10px solid #f7f8fa;
    border-bottom: 10px solid #f7f8fa;
    height: 57px;
    padding: 0 8px;
    p {
      margin-right: 50px;
      span {
        color: #2371c5;
      }
    }
  }
  .invoice-detailed-box {
    .title {
      font-size: 16px;
      font-weight: bolder;
      height: 50px;
      line-height: 50px;
      padding: 0 8px;
    }
    .invoice-info {
      padding: 8px;
      border-top: 1px solid #eef0f5;
      border-bottom: 1px solid #eef0f5;
    }
  }
  /deep/.el-dialog__body {
    padding: 8px;
  }
  .return-info-box {
    width: 540px;
    margin: 0 auto;
    margin-top: 30px;
    padding-bottom: 30px;
    .el-input-number--medium {
      width: 428px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 428px;
    }
    .el-select {
      width: 428px;
    }
    // 提示信息样式
    .tips-info {
      margin: 0 auto;
      background: #e6f7ff;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      width: 475px;
      height: 40px;
      border: 1px solid #2371c5;
      border-radius: 5px;
      display: flex;
      align-items: center;
    }
    .button-box {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
    .el-input-number.is-without-controls .el-input__inner {
      text-align: left;
    }
  }
}
</style>
